<html>
<meta charset="utf-8">

<head>
    <link rel="stylesheet" type="text/css" href="mySheet.css">
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $('button:first').click(function () {
                $('body').removeClass('bkcolor').removeClass('bkimg').removeClass('bkimg_pink').removeClass('bkimg_pink_rx').removeClass('bkimg_pink_nor').removeClass('bkimg_pink_nor_pos');
                $('body').addClass('bkcolor');
            });
            $('button:eq(1)').click(function () {
                $('body').removeClass('bkcolor').removeClass('bkimg').removeClass('bkimg_pink').removeClass('bkimg_pink_rx').removeClass('bkimg_pink_nor').removeClass('bkimg_pink_nor_pos');
                $('body').addClass('bkimg');
            });
            $('button:eq(2)').click(function () {
                $('body').removeClass('bkcolor').removeClass('bkimg').removeClass('bkimg_pink').removeClass('bkimg_pink_rx').removeClass('bkimg_pink_nor').removeClass('bkimg_pink_nor_pos');
                $('body').addClass('bkimg_pink');
            });
            $('button:eq(3)').click(function () {
                $('body').removeClass('bkcolor').removeClass('bkimg').removeClass('bkimg_pink').removeClass('bkimg_pink_rx').removeClass('bkimg_pink_nor').removeClass('bkimg_pink_nor_pos');
                $('body').addClass('bkimg_pink_rx');
            });
            $('button:eq(4)').click(function () {
                $('body').removeClass('bkcolor').removeClass('bkimg').removeClass('bkimg_pink').removeClass('bkimg_pink_rx').removeClass('bkimg_pink_nor').removeClass('bkimg_pink_nor_pos');
                $('body').addClass('bkimg_pink_nor');
            });
            $('button:eq(5)').click(function () {
                $('body').removeClass('bkcolor').removeClass('bkimg').removeClass('bkimg_pink').removeClass('bkimg_pink_rx').removeClass('bkimg_pink_nor').removeClass('bkimg_pink_nor_pos');
                $('body').addClass('bkimg_pink_nor_pos');
            });
            $('#dv_test').click(function () {
                $(this).addClass('bk_simple');
            });
        });
    </script>
    <style>
        body.bkcolor {
            background-color: #b0c4de;
        }

        body.bkimg {
            background-image: url('img/yellow.jpg');
        }

        body.bkimg_pink {
            background-image: url('img/pinkblue.jpg');
        }

        body.bkimg_pink_rx {
            background-image: url('img/pinkblue.jpg');
            background-repeat: repeat-x;
        }

        body.bkimg_pink_nor {
            background-image: url('img/pinkblue.jpg');
            background-repeat: no-repeat;
        }

        body.bkimg_pink_nor_pos {
            background-image: url('img/pinkblue.jpg');
            background-repeat: no-repeat;
            background-position: right top;
        }

        .bk_simple {
            background: lemonchiffon url('img/pinkblue.jpg') no-repeat center top;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>background-color</li>
            <li>background-image</li>
            <li>background-repeat</li>
            <li>background-attachment</li>
            <li>background-position</li>
        </ul>
    </div>
    <div class="dv_show">
        颜色有三种定义方式
        <ol>
            <li>十六进制 例如#ff0000</li>
            <li>RGB 例如rgb(255,0,0)</li>
            <li>颜色名称 例如red</li>
        </ol>
    </div>
    <div class="dv_show">
        background 简写 <br> 顺序为：background-color=> background-image=> background-repeat=> background-attachment=> background-position
        background:red url('xx.jpg') no-repeat fixed left top
    </div>

    <button>设置背景颜色</button>
    <button>设置背景图片</button>
    <button>默认平铺图</button>
    <button>水平平铺图</button>
    <button>不平铺图</button>
    <button>定位不平铺图</button>
    <div id="dv_test" style="width:800px;height:600px">

    </div>
</body>

</html>